<template>
  <div class="hello">
    <demo></demo>

    <el-container>
      <el-main>
        <!-- 搜索框 -->
        <el-input
          v-model="book_name"
          style="width: 800px"
          placeholder="请输入内容"
        ></el-input>
        &nbsp;&nbsp;&nbsp;
        <el-button @click="query_name" type="primary">搜索</el-button>
        <br />
        <!-- 标签 -->
        <!-- <el-row :gutter="20">
          <el-col :span="10" class="col">
            <div class="colCon">
              分类：
              <el-tag>标签一</el-tag>
              <el-tag>标签二</el-tag>
              <el-tag>标签三</el-tag>
              <el-tag>标签四</el-tag>
              <el-tag>标签五</el-tag>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" class="col">
            <div class="colCon">
              分类：
              <el-tag>标签一</el-tag>
              <el-tag>标签二</el-tag>
              <el-tag>标签三</el-tag>
              <el-tag>标签四</el-tag>
              <el-tag>标签五</el-tag>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" class="col">
            <div class="colCon">
              分类：
              <el-tag>标签一</el-tag>
              <el-tag>标签二</el-tag>
              <el-tag>标签三</el-tag>
              <el-tag>标签四</el-tag>
              <el-tag>标签五</el-tag>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" class="col">
            <div class="colCon">
              <el-tag>热门的</el-tag>
            </div>
          </el-col>
          <el-col :span="1" class="col">
            <div class="colCon">
              <el-tag>最新的</el-tag>
            </div>
          </el-col>
        </el-row> -->
        <!-- 内容 -->
        <div class="content_info">
          <el-row :gutter="20">
            <el-col v-for="(book, index) in books" :key="books.id" :span="6"
              ><div class="content_info_content">
                <div class="content_info_content_img">
                  <img :src="book.pictureHeadPath" />
                </div>
                <div class="content_info_content_detail">
                  <div class="content_info_content_detail_price">
                    ￥{{ book.price }}
                  </div>
                  <div class="content_info_content_detail_detail">
                    <a href="#" @click="link_detail(book)"
                      >{{ book.name }}{{ book.id }}</a
                    >
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="12"
            @prev-click="prevBtn"
            @next-click="nextBtn"
            @current-change="currentBtn"
          >
          </el-pagination>
        </div>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import demo from "@/components/nav.vue";
export default {
  components: {
    demo,
  },
  created() {
    this.data();
  },
  name: "HelloWorld",
  data() {
    return {
      book_name: "",
      detatil_login_link: "",
      activeIndex2: "1",
      limit: 12,
      bookname: "",
      price: "",
      book_picture: "",
      books: [],
      pages: "", //当前分页总页数
      total: 0, //当前满足条件总行数
      current: 1, //当前页
    };
  },
  methods: {


    data(){
      let this_ = this;
      this.$http
        .get(
          `http://localhost:88/api/book/info/list`
        )
        .then(function (response) {
          this_.books = response.data.page.records;
          this_.total = response.data.page.total;
          this_.books = response.data.page.records;
          this_.pages = response.data.page.pages;
        })
        .catch(function (err) {
          console.log(err);
        });
    },


    query_name(){
      this.list();
    },


    link_detail(book) {
      this.$router.push({
        path: "/details",
        query: {
          book: book,
        },
      });
    },

    currentBtn(size) {
      let this_ = this;
      this.current = size;
      this.$http
        .get(
          `http://localhost:88/api/book/info/get/list/page/${this.current}/${this.limit}?bookName=${this.book_name}`
        )
        .then(function (response) {
          this_.books = response.data.page.records;
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    prevBtn() {
      let this_ = this;
      this.current = this.current - 1;
      this.$http
        .get(
          `http://localhost:88/api/book/info/get/list/page/${this.current}/${this.limit}?bookName=${this.book_name}`
        )
        .then(function (response) {
          this_.books = response.data.page.records;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    nextBtn() {
      let this_ = this;
      this.current = this.current + 1;
      this.$http
        .get(
          `http://localhost:88/api/book/info/get/list/page/${this.current}/${this.limit}?bookName=${this.book_name}`
        )
        .then(function (response) {
          this_.books = response.data.page.records;
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    list() {
      let this_ = this;
      this.$http
        .get(
          `http://localhost:88/api/book/info/get/list/page/${this.current}/${this.limit}?bookName=${this.book_name}`
        )
        .then(function (response) {
          console.log(response.data);
          this_.total = response.data.page.total;
          this_.books = response.data.page.records;
          this_.pages = response.data.page.pages;
          console.log("total: ", this_.books);
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    detatil_info() {
      this.token = "add";
      if (this.token == null || this.token == "") {
        this.detatil_login_link = "#/login";
        axios
          .post(
            "http://localhost:88/hello?url=bizhan",
            {
              username: "xiaochen",
              age: 23,
              email: "xiaochen@zparkhr.com",
              phone: 13260426185,
            },
            {
              headers: {
                "Content-Type": "application/json",
                token: "Bearer",
              },
            }
          )
          .then(function (response) {
            console.log(response.data);
          })
          .catch(function (err) {
            console.log(err);
          });
      } else {
        this.detatil_login_link = "#/details";
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content_info_content_detail_detail {
  width: 83%;
  font-size: 27px;
  text-align: center;
  height: 40px;
  overflow: hidden;
}

.content_info_content_detail_price {
  font-size: 30px;
  color: red;
  font-family: Hiragino Sans GB;
  /* font-weight: bold; */
}
.content_info_content_detail {
  margin-top: 20px;
  text-align: left;
  line-height: 40px;
}

.content_info_content_img {
  width: 100%;
  height: 200px;
}
.content_info_content_img img {
  width: 100%;
  height: 100%;
}

.content_info_content {
  background: rgb(46, 161, 228, 0.3);
  height: 300px;
  margin: 10px;
}

.content_info {
  width: 80%;

  margin: 0 auto;
  margin-top: 50px;
}

.colCon {
  line-height: 50px;
}

.grid-content {
  border-radius: 4px;
  min-height: 400px;
  position: relative;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.nav_right {
  float: right;
}
.search {
  float: right;
}
.welcome {
  line-height: 60px;
  font-size: 24px;
  float: right;
  width: 100px;
  margin-right: 100px;
  color: aliceblue;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-header,
.el-footer {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: rgba(0, 0, 14, 0.5);
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>